<template>
    <el-drawer
        v-model="visible"
        title="报名信息"
        :mask-closable="false"
        :esc-to-close="false"
        :size="width >= 400 ? 400 : '100%'"
    >
      <el-descriptions :column="2" title="报名信息">
        <el-descriptions-item label="团队编号" :span="2">{{formData.teamNo}}</el-descriptions-item>
        <el-descriptions-item label="报名时间" :span="2">{{timeFormat(formData.createTime,'yyyy-mm-dd hh:MM')}}</el-descriptions-item>
        <el-descriptions-item label="比赛方式">
              <el-tag type="success" v-if="formData.applyType == 1">男单打</el-tag>
              <el-tag type="danger" v-else-if="formData.applyType == 2">女单打</el-tag>
              <el-tag type="danger" v-else-if="formData.applyType == 3">男双打</el-tag>
              <el-tag type="danger" v-else-if="formData.applyType == 4">女双打</el-tag>
              <el-tag type="danger" v-else-if="formData.applyType == 5">男女混打</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag v-if="formData.status == 0">待组队</el-tag>
          <el-tag type="success" v-else-if="formData.status == 1">正常</el-tag>
          <el-tag type="danger" v-else-if="formData.status == 2">不通过</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <div style="border-top: 1px dashed #aaa;margin: 0 -12px 5px;"></div>
      <el-descriptions class="item-cover" :column="2" :title="'队伍'+(formData.memberList.length>1?index+1:'')+' — '+ member.name" v-if="formData.memberList" :key="index" v-for="(member,index) in formData.memberList">
        <el-descriptions-item label="头像" label-align="center">
          <el-avatar :src="formData.cover" :size="50" />
        </el-descriptions-item>
        <el-descriptions-item label="姓名">{{member.name}}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{member.age}}</el-descriptions-item>
        <el-descriptions-item label="性别">
          <span v-if="member.sex==1">男</span>
          <span v-if="member.sex==0">女</span>
        </el-descriptions-item>
        <el-descriptions-item label="学号" :span="2">{{member.studentNum}}</el-descriptions-item>
        <el-descriptions-item label="学院" :span="2">{{member.college}}</el-descriptions-item>
        <el-descriptions-item label="年级" :span="2">{{member.grade}}</el-descriptions-item>
        <el-descriptions-item label="专业" :span="2">{{member.major}}</el-descriptions-item>
        <el-descriptions-item label="联系电话" :span="2">{{member.contact}}</el-descriptions-item>
        <el-descriptions-item label="类型">
          <el-tag type="success" v-if="member.type == 1">社团管理员</el-tag>
          <el-tag type="danger" v-else-if="member.type == 3">社团团员</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag v-if="member.status == 0">待审核</el-tag>
          <el-tag type="success" v-else-if="member.status == 1">通过</el-tag>
          <el-tag type="danger" v-else-if="member.status == 2">拒绝</el-tag>
        </el-descriptions-item>

      </el-descriptions>
    </el-drawer>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import {competitionApplyTeam} from "@/api/member";
import {useWindowSize} from "@vueuse/core";
import {timeFormat} from "@/utils/util"
const { width } = useWindowSize()
const visible = ref(false)
const formData = reactive({
  applyType: '',
  competitionId: '',
  createId: '',
  createTime: '',
  id: '',
  memberId:  '',
  memberList: [],
  status: '',
  teamNo:  ''
})
const getDetail = async (teamNo:any) => {
  const data = await competitionApplyTeam({
    teamNo: teamNo
  })
  Object.keys(formData).forEach((key) => {
    //@ts-ignore
    formData[key] = data[key]
  })
}
// 打开
const onOpen = (teamNo:any) => {
  visible.value = true
  getDetail(teamNo)
}
defineExpose({ onOpen })
</script>
<style scoped lang="scss">
:deep(.el-descriptions__body tr:first-child td:first-child) {
  display: flex;
  justify-content: start;
  align-items: center;
}
</style>
